<template>
  <div class="main-container">
    <layout class="no-padding h-75vh" :operation="MinisterShow">
      <template slot="search">
        <div class="breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>生产派工管理</el-breadcrumb-item>
            <el-breadcrumb-item>工装产品派工</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-form inline :model="fourSearch">
          <div class="search-left">
            <el-form-item>
              <el-input v-model="fourSearch.drawingNumber" class="w150" placeholder="输入图号" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="fourSearch.productName" class="w150" placeholder="输入品名" clearable></el-input>
            </el-form-item>
          </div>
          <div class="search-right">
            <el-button
              @click="
                clear()
                fourSubmit()
              "
              >清空</el-button
            >
            <el-button type="primary" @click="fourSubmit()">查询</el-button>
          </div>
        </el-form>
      </template>
      <template slot="content">
        <el-table border stripe :data="toolProductList" row-key="id" @row-dblclick="DoubleClick2">
          <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
          <el-table-column prop="createrName" label="下单人" align="center" width="120"></el-table-column>
          <el-table-column prop="createTime" label="下单日期" sortable align="center" width="200"></el-table-column>
          <el-table-column prop="drawingNumber" label="图号" align="center" width="150"></el-table-column>
          <el-table-column prop="productName" label="品名" align="center" width="150"></el-table-column>
          <el-table-column prop="materialQuality" label="材质" align="center" width="150"></el-table-column>
          <el-table-column prop="number" label="数量" sortable align="center" width="120"></el-table-column>
          <el-table-column prop="state" label="状态" align="center" width="120"></el-table-column>
          <el-table-column prop="remark" label="备注" align="center" min-width="120"></el-table-column>
          <el-table-column v-if="MinisterShow" label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button @click="distributeRow(scope.row, '工装品')" type="text" icon="el-icon-s-order" size="small" :disabled="!canNoDispatch.includes(scope.row.state)">派工</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <distribute ref="distribute"></distribute>
      <look ref="look"></look>
    </layout>
    <!-- <distribute ref="distribute"></distribute>
    <look ref="look"></look> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { State, namespace } from 'vuex-class'
import Layout from '@/views/_common/Layout.vue'
import Look from '../dispatch/look.vue'
import Distribute from '../dispatch/components/distribute.vue'

const vuexDispatch = namespace('ThreeDispatch')
const vuexEnter = namespace('TwoEnter')
const vuexTool = namespace('OneTool')
const vuexNotice = namespace('NewNotice')
const vuexLogin = namespace('Login')
const vuexDispatchDetail = namespace('DispatchDetail')
@Component({
  components: {
    Layout,
    Look,
    Distribute
  }
})
export default class Index extends Vue {
  public $refs!: {
    look: any
    distribute: any
    four: any
  }
    @vuexDispatchDetail.Mutation setProducingId

  //权限按钮
  // @vuexLogin.State positionName: any
  @vuexLogin.State MinisterShow: any
  //接口
  @vuexDispatch.Action GET_ALL_DISPATCH: any
  @vuexDispatch.Action GET_DETAIL_DISPATCH: any

  //通知单进入
  @vuexDispatch.State noticeList: any
  @vuexNotice.State productList: any
  @vuexNotice.Action GET_NOTICE_DETAIL: any

  //返修处理进入
  @vuexEnter.State thirdData: any
  @vuexEnter.Action GET_REWORK_LIST: any
  threeShow: boolean = true
  threeSearch: any = {
    dispatchNumber: '',
    processName: '',
    state: '生产中',
    page: 1,
    pageSize: 20
  }
  threeSubmit() {
    this.GET_REWORK_LIST({ ...this.threeSearch })
  }
  threeclear() {
    this.threeSearch = {}
  }
  threeId: string = ''
  fourId: string = ''
  selectNUmber: number = 0
  //工装产品进入
  @vuexTool.State toolProductList: any
  @vuexTool.Action GET_TOOL_LIST: any
  fourShow: boolean = true
  fourSearch: any = {
    drawingNumber: '',
    productName: '',
    state: '',
    page: 1,
    pageSize: 20
  }
  fourSubmit() {
    this.GET_TOOL_LIST({ ...this.fourSearch })
  }

  formSearch: any = {
    // keyword:''
  }
  s1: string = 's1'
  first: string = 'first'
  selectId: string = ''
  /*
  noticeList: any[] = [
    {
      id: '1',
      noticeNumber: '19-034',
      orderUnit: '东亚里根'
    },
    {
      id: '2',
      noticeNumber: '19-035',
      orderUnit: '东亚里根'
    },
    {
      id: '3',
      noticeNumber: '19-036',
      orderUnit: '陕西榆林'
    }
  ]
  */

  basic: any = {
    orderUnit: '陕西西安',
    noticeNumber: '20-0429',
    workingNumber: ''
  }

  tableData: any[] = [
    {
      id: '1',
      number: '200',
      dd: '待处理'
    },
    {
      id: '2',
      number: '100',
      dd: '待处理'
    },
    {
      id: '3',
      number: '250',
      dd: '已处理'
    },
    {
      id: '4',
      number: '300',
      dd: '已处理'
    },
    {
      id: '5',
      number: '200',
      dd: '已处理'
    }
  ]

  tableDatas: any[] = [
    {
      id: '1',
      number: '200',
      dd: '待处理'
    },
    {
      id: '2',
      number: '100',
      dd: '待处理'
    },
    {
      id: '3',
      number: '100',
      dd: '待处理'
    },
    {
      id: '4',
      number: '200',
      dd: '待处理'
    },
    {
      id: '5',
      number: '200',
      dd: '已处理'
    },
    {
      id: '6',
      number: '300',
      dd: '已处理'
    },
    {
      id: '7',
      number: '300',
      dd: '已处理'
    },
    {
      id: '8',
      number: '250',
      dd: '已处理'
    }
  ]
  canNoDispatch: string[] = ['待派工', '生产中']

  // 取消冒泡
  stopBubble(event) {
    if (event.stopPropagation) {
      event.stopPropagation()
    } else {
      event.cancelBubble = true
    }
  }

  created() {
    this.GET_ALL_DISPATCH() // 生产派工数据
  }

  show(data) {
    this.basic.noticeNumber = data.noticeNumber
    this.basic.orderUnit = data.orderUnit
    this.basic.workingNumber = data.workingNumber
    this.getProductList(data.noticeId)
  }
  async getProductList(noticeId) {
    let result = await this.GET_NOTICE_DETAIL({ noticeId: noticeId })
    if (result) {
      console.log(this.productList)
      this.s1 = 's'
    }
  }

  distributeRow(rowData, type) {
    this.setProducingId(rowData.producingId)
    this.$router.push({
      name: 'dispatch-details',
      params: {
        from: 'doubleClick',
        product: rowData
      }
    })
    // this.GET_DETAIL_DISPATCH({ producingId: rowData.producingId })
    // this.$refs.distribute.open(rowData.producingId, type)
  }

  clear() {
    this.fourSearch = {
      drawingNumber: '',
      productName: '',
      state: '',
      page: 1,
      pageSize: 20
    }
  }
  DoubleClick2(row) {
    this.$refs.look.open(row.producingId, row, this.basic)
  }

  // 点击切换面板
  changeTab(tab, event) {
    if (tab.name == 'first') {
      this.GET_ALL_DISPATCH()
    } else if (tab.name == 'third') {
      // this.GET_REWORK_LIST({ ...this.threeSearch })
    } else if (tab.name == 'four') {
      this.basic = {
        orderUnit: '',
        noticeNumber: 0,
        workingNumber: ''
      }
      this.GET_TOOL_LIST({ ...this.fourSearch })
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  // float: left;
  // display: inline;
  border: 1px solid #ccc;
  margin-right: 30px;
  border-radius: 15px;

  .total_title {
    width: 200px;
    color: #000;
    height: 260px;
    line-height: 30px;
    text-align: center;
    .text {
      font-size: 18px;
      font-weight: bold;
      margin: 0 5px;
    }
  }

  &:hover {
    color: #000;
    background: #fff;
  }
}
.s1 {
  display: none;
  height: '100%';
}
//通知单滚动
//通知单滚动
.notice-box {
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling: touch;
}

.notice-item {
  height: 270px;
}
.breadcrumb {
  height: 25px;
  width: 100%;
  border: none;
}
/*隐藏掉滚动条*/
.notice-box::-webkit-scrollbar {
  display: none;
}
.layout .operation {
  overflow-x: auto;
}

.el-tabs {
  padding: 0 20px;
  margin: 0px 10px 0;
  border: 1px solid #e4e7ed;
  background-color: #fff;
  .el-tabs__content {
    min-width: 1200px;
  }
}
</style>
